<script setup>
import * as THREE from 'three';
import { ref, onMounted } from 'vue';

const container = ref(null);

// 三大件
// 场景
const scene = new THREE.Scene();

// 相机
const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );

// 渲染器
const renderer = new THREE.WebGLRenderer( {
    antialias: true,
} );
renderer.setSize( window.innerWidth, window.innerHeight );

onMounted(() => {
  container.value.appendChild( renderer.domElement );
  // 动画
  function animate() {
      requestAnimationFrame( animate );
      // cube.rotation.y += .1; // 2 * PI 弧度制
      renderer.render( scene, camera );
  }
  animate();
});

// 创建物体
const geometry = new THREE.BoxGeometry( 1, 1, 1 );
const material = new THREE.MeshPhongMaterial( {
    color: 0x00ff00,
} );
const cube = new THREE.Mesh( geometry, material );
scene.add( cube );

// 位置
camera.position.set( 5, 5, 5 );
// 角度
camera.lookAt( 0, 0, 0 );

// 创建光
const light = new THREE.PointLight( 0xffffff, 1 );
light.position.set( 10, 20, 30 );
scene.add( light );

</script>

<template>
  <div ref="container" />
</template>
